<template>
  <div id="index-page">
    <!-- top bar -->
    <div id="top-bar">
      <top-bar></top-bar>
    </div>

    <!-- Home Part -->
    <div id="home">
      <home-page></home-page>
    </div>

    <!-- Story Part -->
    <div id="story">
      <story-page></story-page>
    </div>

    <!-- Character Part -->
    <div id="character">
      <character-page></character-page>
    </div>

    <!-- About Part -->
    <div id="about">
      <about-page></about-page>
    </div>

    <!-- Roadmap Part -->
    <div id="roadmap">
      <roadmap-page></roadmap-page>
    </div>

    <!-- Friends Part -->
    <!-- <div id="friends">
      <friends-page></friends-page>
    </div> -->

    <!-- bottom bar -->
    <div id="bottom-bar">
      <bottom-bar></bottom-bar>
    </div>

    <!-- back top part -->
    <transition name="fade">
      <div id="back-top" v-show="isShowBackTop">
        <img :src="backTop" @click="backToTop" />
      </div>
    </transition>
  </div>
</template>

<script>
// --- components ---
import TopBar from "../components/TopBar.vue";
import BottomBar from "../components/BottomBar.vue";
import HomePage from "./home/HomePage.vue";
import StoryPage from "./story/StoryPage.vue";
import CharacterPage from "./character/CharacterPage.vue";
import AboutPage from "./about/AboutPage.vue";
import RoadmapPage from "./roadmap/RoadmapPage.vue";
import FriendsPage from "./friends/FriendsPage.vue";
// --- utils ---
import { isPhone } from "@/utils";

export default {
  name: "IndexPage",
  components: {
    TopBar,
    BottomBar,
    HomePage,
    StoryPage,
    CharacterPage,
    AboutPage,
    RoadmapPage,
    FriendsPage,
  },
  data() {
    return {
      // static
      backTop: require("@/assets/images/icons/back_top.png"),
      // flag
      isShowBackTop: false,
    };
  },
  methods: {
    // listen to scroll event
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      let dirTop = document.querySelector("#story").offsetTop;
      let roadmapTop = document.querySelector("#roadmap").offsetTop;
      let back = document.querySelector("#back-top");

      if (!isPhone()) {
        if (scrollTop >= dirTop) {
          this.isShowBackTop = true;
        } else {
          this.isShowBackTop = false;
        }
        if (scrollTop > roadmapTop) {
          back.style.position = "absolute";
          back.style.bottom = "497px";
        } else {
          back.style.position = "fixed";
          back.style.bottom = "69px";
        }
      } else {
        if (scrollTop >= 812) {
          this.isShowBackTop = true;
        } else {
          this.isShowBackTop = false;
        }
      }
    },
    // back to top 0
    backToTop() {
      window.scrollTo(0, 0);
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, {
      passive: true,
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="less" scoped>
#index-page {
  height: 100%;
  position: relative;
  overflow: auto;

  .center-wrapper {
    max-width: 1920px;
    margin: 0 auto;
  }

  #back-top {
    position: fixed;
    // bottom: 497px;
    bottom: 69px;
    right: 30px;
    z-index: 9;
    cursor: pointer;
    transition: transform opacity 1s ease;

    img {
      width: 80px;
    }
  }

  // animate
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.3s ease;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }
}

#index-page::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 768px) {
  #index-page {
    #back-top {
      // position: fixed;
      // bottom: 19.8667vw;
      // right: 4vw;
      // z-index: 9;
      // cursor: pointer;
      // transition: all 1s ease;

      // img {
      //   width: 10.6667vw;
      // }
      display: none;
    }
  }
}
</style>
